<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app"></div>
</body>
    <script src="https://unpkg.com/vue@next"></script>
    <script>
        const app = Vue.createApp({
           data() {
               return {
                   title: 'hello',
                   likes: 333,
                   funVal: function(){
                       alert('ABC')
                   }
               }
           },
               template:`
               静态传值<test title="I am title" />
               动态传值<test :title="title"/>
               `
            
            })
            app.component('test',{
                props: {
                    title: {
                        type:string,
                        default:'helllo'
                    },
                    ids:{
                        type:Array,
                        default:function(){
                            return ['A','B']
                        }
                    },
                    likeVal: {
                        type: Number,
                        default: function(){
                            return 1000
                        },

                        validator: function(value){
                            console.log('likeVal -->' + value)
                            return value
                        }
                    },
                    funVal: {
                        type: Function
                    }
                },
                template:`
                <div>{{title}}</div>
                `,
                methods: {
                        handleFun(){
                            alert('DEF');
                            this.funVal();
                        }
                    }
                },
            })
            const vm = app.mount("#app");
    </script>
</html>